<template>
  <ve-histogram
    :data="chartData"
    :settings="chartSettings"
    :extend="extendSettings"
    :theme="tdTheme"
    :legend-visible="false"
    height="100%"
    :data-zoom="dataZoom"
  ></ve-histogram>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import ChartMixin from './chartMixins'
import echarts from 'echarts'

@Component({
  name: 'LargeBarChart',
  mixins: [ChartMixin]
})
export default class LargeBarChart extends Vue {
  tdTheme = require('./theme.json')
  chartSettings = {
    yAxisName: ['个']
  }
  extendSettings = {
    tooltip: {
      formatter: '{b0}: {c1}%'
    },
    series(series: any) {
      series &&
        series.forEach((item: any, index: number) => {
          item.barWidth = 10
          if (index > 0) {
            item.barGap = '-100%'
            item.itemStyle = {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#04AEC1' },
                { offset: 0.5, color: '#026FE3' },
                { offset: 1, color: '#026FE3' }
              ]),
              barBorderRadius: [5, 5, 0, 0]
            }
          } else {
            item.itemStyle = {
              color: 'rgba(0, 69, 174, 0.2)'
            }
          }
        })
      return series
    }
  }
  chartData = {}
}
</script>
<style lang="scss" scoped></style>
